import React, { useState } from 'react';
import { Card } from '../../components/common/Card';

interface Project {
  id: string;
  name: string;
  description: string;
  progress: number;
  dueDate: string;
  members: { id: string; name: string; avatar?: string }[];
  tags: string[];
}

const Projects: React.FC = () => {
  const [projects, setProjects] = useState<Project[]>([
    {
      id: '1',
      name: '网站重构项目',
      description: '对公司官网进行重构，提升用户体验和页面性能',
      progress: 75,
      dueDate: '2025-04-15',
      members: [
        { id: '1', name: '张三' },
        { id: '2', name: '李四' },
        { id: '3', name: '王五' },
      ],
      tags: ['前端', '设计', 'React']
    },
    {
      id: '2',
      name: '移动应用开发',
      description: '开发iOS和Android版本的移动应用',
      progress: 40,
      dueDate: '2025-05-20',
      members: [
        { id: '2', name: '李四' },
        { id: '4', name: '赵六' },
      ],
      tags: ['移动', 'React Native']
    },
    {
      id: '3',
      name: 'API系统优化',
      description: '优化现有API系统，提升响应速度和稳定性',
      progress: 90,
      dueDate: '2025-03-30',
      members: [
        { id: '1', name: '张三' },
        { id: '3', name: '王五' },
      ],
      tags: ['后端', '性能', 'API']
    },
    {
      id: '4',
      name: '用户分析系统',
      description: '构建用户行为分析和报表系统',
      progress: 20,
      dueDate: '2025-06-10',
      members: [
        { id: '1', name: '张三' },
        { id: '2', name: '李四' },
        { id: '5', name: '钱七' },
      ],
      tags: ['数据', '分析', 'Dashboard']
    },
  ]);

  const [filter, setFilter] = useState('');

  const filteredProjects = filter === '' 
    ? projects
    : projects.filter(project => 
        project.name.toLowerCase().includes(filter.toLowerCase()) ||
        project.description.toLowerCase().includes(filter.toLowerCase()) ||
        project.tags.some(tag => tag.toLowerCase().includes(filter.toLowerCase()))
      );

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">项目</h1>
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
          <span className="mr-2">+</span> 新建项目
        </button>
      </div>
      
      <div className="relative w-full max-w-md">
        <input
          type="text"
          placeholder="搜索项目..."
          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        />
        <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
          <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredProjects.map(project => (
          <Card key={project.id} className="hover:shadow-lg transition-all duration-300">
            <div className="flex flex-col h-full">
              <div className="mb-4">
                <h3 className="text-xl font-semibold mb-2">{project.name}</h3>
                <p className="text-gray-600 mb-3">{project.description}</p>
                <div className="flex flex-wrap gap-1 mb-4">
                  {project.tags.map((tag, index) => (
                    <span key={index} className="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded">
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
              
              <div className="mt-auto">
                <div className="mb-2">
                  <div className="flex justify-between text-sm text-gray-600 mb-1">
                    <span>进度</span>
                    <span>{project.progress}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-blue-500 rounded-full h-2" 
                      style={{ width: `${project.progress}%` }}
                    ></div>
                  </div>
                </div>
                
                <div className="flex justify-between items-center pt-3 border-t border-gray-100">
                  <div className="flex -space-x-2">
                    {project.members.slice(0, 3).map((member, index) => (
                      <div 
                        key={member.id} 
                        className="w-8 h-8 rounded-full bg-gray-300 border-2 border-white flex items-center justify-center text-xs"
                        title={member.name}
                      >
                        {member.avatar ? (
                          <img src={member.avatar} alt={member.name} className="w-full h-full rounded-full" />
                        ) : (
                          member.name.charAt(0)
                        )}
                      </div>
                    ))}
                    {project.members.length > 3 && (
                      <div className="w-8 h-8 rounded-full bg-gray-200 border-2 border-white flex items-center justify-center text-xs">
                        +{project.members.length - 3}
                      </div>
                    )}
                  </div>
                  <span className="text-sm text-gray-500">
                    截止日期: {project.dueDate}
                  </span>
                </div>
              </div>
            </div>
          </Card>
        ))}
        
        <div className="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center h-64 cursor-pointer hover:border-blue-500 transition-colors duration-300">
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 text-2xl mx-auto mb-4">+</div>
            <p className="text-gray-600">创建新项目</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Projects; 